
<%@ include file="/common/taglibs.jsp"%>
<!--分页查询共用的页面-->
<%@ include file="/common/common.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/video/js/reset.css">
	<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/video/js/bin.css">
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/json2.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/public.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/public1.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/hashtable.js"></script>
    <script type="text/javascript" src="<%=ApplicationPath%>/video/js/lang.js"></script>


    <!--以下三个为shplayer相关js，需要一起引用  -->
    <script type="text/javascript" src="<%=ApplicationPath%>/video/shplayer/ckplayer/ckplayer.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=ApplicationPath%>/video/shplayer/shplayer.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=ApplicationPath%>/video/shplayer/shplayers.js" charset="utf-8"></script>
    
    <script type="text/javascript" src="<%=ApplicationPath%>/video/videoManagerNew.js?v=2233"></script>


    <!--添加弹层效果和layui-->
    <script type="text/javascript" src="<%=ApplicationPath%>/js/layer/layer.js"></script>

    <script>

    var toolsHeight = 40;

    var oldWidth = "";//保存播放器载体大小
    var oldHeight = "";

    /*
    通过vehicleId 获取车辆信息
        通过获取的车辆信息初始化播放器对象并发送命令
    */
    function getVehicleInfo(vehicleId){
        var url = '<%=ApplicationPath%>/alarmImage/getVehicleInfo.action';
        var param = {
            vehicleId:vehicleId,
        };
        Utility.getAjaxData(url,JSON.stringify(param),function(data){
            if(data.length> 0){
                console.log("获取到车辆数据信息");
                console.log(data);
                var dataTemp = data[0];
                if(dataTemp){

                    var obj = {
                        simNo: dataTemp.simNo,
                        plateNo: dataTemp.plateNo,
                        videoChannelNum: dataTemp.videoChannelNum,
                        vehicleId: dataTemp.vehicleId,
                    };


                    if (parent.RealTimeVideoPlayersTemp != null) {
                        parent.RealTimeVideoPlayersTemp.initShplayers(obj, false);
                        parent.RealTimeVideoPlayersTemp.sendAllRealVideoRequest();//发送请求
                    }
                }
            }
        });
    }

    
    // //选择通道事件
    // var editChannels = function(){
    //     console.log("选择通道方法");
    //     layer.open({
    //         title: '选择视频通道',
    //         type: 2,
    //         area: ['480px', '260px'],
    //         fixed: false, //不固定
    //         // offset:['150px','450px'],
    //         maxmin: false,
    //         content: '<%=ApplicationPath%>/vehicleRealTimeVideo/editDefaultChannels.action',
    //         cancel: function () {
    //             // layer.msg('没有进行任何操作就关闭');
    //         }
    //     });
    //     // RealTimeVideoPlayers.editChannelsData("1,3,4,5,6,7");
    // }
    
    $(document).ready(function(){
        // console.log("新实时视频开始准备......");

        // console.log($("body").css("height"));
        // console.log($("#PlayersDiv").css("height"));

        var bodyHeight = parseInt($("body").css("height"));
        if(!isNaN(bodyHeight) && bodyHeight>0){
            bodyHeight = bodyHeight - 37;
            $("#PlayersDiv").css("height",bodyHeight);
        }
        // console.log($("body").css("height"));
        // console.log($("#PlayersDiv").css("height"));

        showToolTips();//设置工具栏提示信息

        //初始化赋值父页面全局对象
        if(parent.RealTimeVideoPlayersTemp == null){
            parent.RealTimeVideoPlayersTemp = RealTimeVideoPlayers;
        }
        var url = '<%=ApplicationPath%>';
        RealTimeVideoPlayers.initBasicData("PlayersDiv",url);


        ///////////以下为测试代码


        // RealTimeVideoPlayers.test("realTimeVideoNew.jsp");
        var vehicleId = ${vehicleId};
        // console.log("vehicleId = "+vehicleId);
        if(vehicleId > 0){
            console.log("开始请求车辆数据并请求车辆视频");
            // getVehicleInfo(vehicleId);
        }
        
        
        // console.log("车辆id："+ vehicleId);
        // getVehicleInfo(vehicleId);
        // if(shplayersTemp == null){
        //     var obj = {
        //         id: 'PlayersDiv',
        //         simNo: 123,
        //         plateNo: '测C00001',
        //         playerNum: 9,
        //         // stopBtnCallback:myStop,
        
        //     };
        //     shplayersTemp = new shplayers(obj);
        // }
    });
    

//全屏显示
    var showFullScreen = function(){
        console.log("开始全屏");
        var elem = document.getElementById("PlayersDiv");
        // oldWidth = elem.style.width;
        // oldHeight = elem.style.height;
        oldWidth = $("#PlayersDiv").css("width");
        oldHeight = $("#PlayersDiv").css("height");
        if (parent.RealTimeVideoPlayersTemp != null) {
            // console.log(window.screen.width + " * " + window.screen.height);
            elem.style.height = window.screen.height;
            elem.style.width = window.screen.width;
            parent.RealTimeVideoPlayersTemp.requestFullScreen(elem);
        }
        
        
        
    }

    
    window.onresize = function() {
        // console.log("大小更改");
        if (!checkFull()) {
            //要执行的动作
            // $("#dashboard_id").removeClass('expand').addClass('contract');//这里捡个懒，直接用JQ来改className
            // console.log("退出全屏");
            //重新刷新
            // console.log(oldWidth + " * " + oldHeight);
            if(parseInt(oldWidth) > 100 && parseInt(oldHeight) > 100){
                // console.log("开始刷新");
                var elem = document.getElementById("PlayersDiv");
                elem.style.height = oldHeight;
                elem.style.width = oldWidth;
                var shplayersTemp = parent.RealTimeVideoPlayersTemp.shplayersTemp;
                if (shplayersTemp != null) {
                    shplayersTemp.initPlayers(false);//不修改通道信息初始化
                }
            }
        }else{
            console.log("全屏");
        }
    }
   //获取是否全屏标记
    function checkFull() {
        // var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        var isFull = document.webkitIsFullScreen;
        //to fix : false || undefined == undefined
        if (isFull === undefined) {isFull = false;}
        return isFull;
    }

    //显示工具栏提示信息
    var showToolTips = function(){
        // console.log("开始设置工具栏提示信息。。。。。。。");
        var closeTime = 1200;
        $("#box_one_player").mouseenter(function(event){
            layer.tips('单画面', '#box_one_player', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_four_players").mouseenter(function(){
            layer.tips('四画面', '#box_four_players', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_six_players").mouseenter(function(){
            layer.tips('六画面', '#box_six_players', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_eight_players").mouseenter(function(){
            layer.tips('八画面', '#box_eight_players', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_nine_players").mouseenter(function(){
            layer.tips('九画面', '#box_nine_players', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_sixteen_players").mouseenter(function(){
            layer.tips('十六画面', '#box_sixteen_players', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_fullScreen").mouseenter(function(){

            layer.tips('全屏', '#box_fullScreen', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });



        $("#play_all_img").mouseenter(function(){
            layer.tips('播放所有视频', '#play_all_img', {
                tips: [4, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });

        $("#box_setting").mouseenter(function(){
            layer.tips('设置', '#box_setting', {
                tips: [2, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });


        $("#box_voice").mouseenter(function(){
            layer.tips('设置音量', '#box_voice', {
                tips: [3, '#0FA6D8'], //还可配置颜色
                time:closeTime,
            });
        });
    }



    //显示更新说明
    var showVersionInfo = function(){
        console.log("选择更新说明");
        layer.open({
            title: '更新说明',
            type: 2,
            area: ['620px', '350px'],
            fixed: false, //不固定
            // offset:['150px','450px'],
            maxmin: false,
            content: '<%=ApplicationPath%>/test/versionInfo.html',
            cancel: function () {
                // layer.msg('没有进行任何操作就关闭');
            }
        });
    }

    </script>
    <style>
    .playersDiv{
        position: absolute;
        width:100%;
        height:100%;
        background-color:darkgray;
        top:37px;
    }
    .fullScreenDiv{
        margin-top: 12px;
        width:14px;
        height:14px;
        /* background-color: burlywood; */
        background-image:url('<%=ApplicationPath%>/image/fullScreen.png'); /*图片地址*/ 
        background-origin:content; /*从content区域开始显示背景*/ 
        background-position:50% 50%; /*图片上下左右居中*/ 
        background-size:cover; /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/ 
        background-repeat:no-repeat; /*图像不重复显示*/
        cursor: pointer; 
    }
    </style>
</head>

<body  style="width:100%;height:100%">
        <!--  -->
    <div class="map_btn" style="z-index:1000;">
        <div class="tv_box" style="display:block;float:left;">
            <span id="box_one_player"><i class="icon icon_num1"></i></span>
            <span id="box_four_players"><i class="icon icon_num2"></i></span>
            <span id="box_six_players"><i class="icon icon_num3"></i></span>
            <span id="box_eight_players"><i class="icon icon_num4"></i></span>
            <span id="box_nine_players"><i class="icon icon_num5"></i></span>
            <span id="box_sixteen_players"><i class="icon icon_num6"></i></span>
            <span id="box_fullScreen"><div class="fullScreenDiv" onclick="javascript:showFullScreen();"></div></span>
            <span><i class="icon icon_num7"></i></span>
            <span><i class="icon icon_num8"></i></span>
            <span id="box_top"><i class="icon icon_top"></i></span>
            <span id="box_bottom"><i class="icon icon_bottom"></i></span>
            <!-- <span id="box_viewSize">
                            <i class="icon icon_view"></i><i class="icon icon_xl"></i>
                            <ul class="tc_box" style="display: none;">
                                <li id="liViewFull"><a id="viewFull" href="#"><i class="icon_select"></i>满画面显示</a></li>
                                <li id="liView4X3"><a id="view4X3" href="#"><i class="icon_select"></i>4:3显示</a></li>
                                <li id="liView16X9"><a id="view16X9" href="#"><i class="icon_select"></i>16:9显示</a></li>
                            </ul>
                        </span> -->
            <!-- <span id="box_viewMode">
                            <i class="icon icon_sslc"></i><i class="icon icon_xl"></i>
                            <ul class="tc_box" style="display: none;">
                                <li><a id="bufferShort" href="#"><i class="icon icon_gou"></i>实时性好</a></li>
                                <li><a id="bufferLong" href="#"><i class="icon icon_gou"></i>实时性一般</a></li>
                            </ul>
                        </span> -->
            <span id="box_capture">
                <i class="icon icon_phone"></i><i class="icon icon_xl"></i>
            </span>
    
            <span id="play_all_img">
                <i class="icon icon_play_all"></i>
                <!-- <i class="icon icon_xl"></i> -->
            </span>
            <span id="box_stop">
                <i class="icon icon_close_show"></i><i class="icon icon_xl"></i>
                <ul class="tc_box" style="display: none;">
                    <li><a id="stopAll" href="#"><i class="icon icon_gou"></i>停止所有视频</a></li>
                    <li><a id="clearAll" href="#"><i class="icon icon_gou"></i>清除所有视频</a></li>
                </ul>
            </span>
            <span id="box_setting"><i class="icon icon_num9"></i></span>
            <span id="box_voice"><i class="icon icon_voice"></i></span>
        </div>
        <div id="volumeSlider" style="display:none;float:left;margin-left:15px;margin-top:5px;">
            <input class="easyui-slider" style="width:120px" data-options=" 
                            showTip: false,value:2,
                            mode: 'h',min:0,max:10,step:1,onChange:onSliderValueChange,
                            reversed: false">
        </div>
        <!-- <span>vehicleid : ${vehicleId}</span> -->
        <!-- <div style="float:left;margin-left:15px;margin-top:10px;">
            <span><a href="javascript:void(0);" onclick="javascript:showVersionInfo();" style="color:red;">更新说明</a></span>
        </div> -->
    </div>
    <div id="PlayersDiv" class="playersDiv"> </div>
</html>

















